<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mapbox-gl/1.13.2/mapbox-gl.css" rel="stylesheet">

    <script src="./js/jquery.min.js"></script>
    <script include="draw,compare" src="./dist/include-mapboxgl.js"></script>
    <!-- <script src="./dist/iclient-mapboxgl.js"></script> -->
</head>

<body>
    <!-- // 地图显示的div -->
    <div id="map" style="position:absolute;left:0px;right:0px;top:0;bottom: 0;"></div>

    <script>

        const url = "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World";
        var attribution =
            "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";

        var map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles1": {
                        "attribution": attribution,
                        "type": "raster",
                        "tiles": ['https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
                        "tileSize": 256,
                        // maxzoom:10
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles1",
                    "minzoom": 0,
                    "maxzoom": 22
                }]
            },
            center: [120.143, 30.236], // 地图初始中心点
            zoom: 3 // 地图初始缩放级别
        });

        // 导航
        map.addControl(new mapboxgl.NavigationControl(), "top-left");

        var draw = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
                line_string: true,
                polygon: true,
                trash: true
            }
        });

        map.addControl(draw, 'top-left');


        function measureDistance(e) {
            debugger
            if (!e.features) {
                console.log(e);
            }

            const type = e.features[0].geometry.type; // Polygon LineString

            var param;
            if (type === "LineString") {
                param = new mapboxgl.supermap.MeasureParameters(e.features[0]);

                new mapboxgl.supermap
                    .MeasureService(url)
                    .measureDistance(param).then(function (serviceResult) {
                        var distance = serviceResult.result.distance;
                        console.log(distance + "米");
                    });
            } else if (type === "Polygon") {
                param = new mapboxgl.supermap.MeasureParameters(e.features[0]);

                new mapboxgl.supermap
                    .MeasureService(url)
                    .measureArea(param).then(function (serviceResult) {
                        var area = serviceResult.result.area;
                        var rounded_area = Math.round(area * 100) / 100;
                        console.log(rounded_area + "平方米");
                    });
            }


        }

        function removeMsg() {
            $('#msg_container').remove();
        }

        map.on('draw.create', measureDistance);
        map.on('draw.delete', removeMsg);

    </script>
</body>

</html>